<template>
  <div class="login">
   <div class="home-header">
       <h3>饭了么</h3>
   </div>
   <div class="middle">
     <h2>欢迎使用</h2><h2 style="color: #0d66e3;">饭了么</h2>
     <p>登陆后即可发帖寻找饭搭子</p>
     <img src="@/assets/tubiao.png">
     <br>
     <van-field v-model="account" label="邮箱:" placeholder="请输入邮箱" />
     <van-field v-model="password" label="密码:" type="password"  placeholder="请输入密码"/>
   </div>
   <div class="bottom">
    <van-button  type="primary" round  color="#0a87f5"  @click="login">登录</van-button>
    <van-button  type="primary" round color="#ff8d1a" to="/stuzhuce">注册</van-button>
<br>
    <input type="checkbox" checked class="sure">
    <div class="xieyi">我已阅读 <a href="#">《用户协议》</a>并同意</div>
   </div>
  </div>
</template>

<script>
import {passwordLogin} from '@/api/login'

let Base64 = require('js-base64').Base64; // 引入
export default {
name:"user",
data() {
  return {
    account:'',//账号
    password:'',//密码
  }
 },
  methods:{
  async login(){
    if(this.password==''&& this.account==''){
      this.$toast('账号或密码不能为空')
      return false
    }
    //调用登录接口，把数据传到接口
    // let password=Base64.encode(this.password) //对用户输入的密码加密完传到后台
    // console.log(this.account,this.password);
    await passwordLogin(this.account,this.password).then((res)=>{
      console.log(1111);
    const yonghu=res.data
     this.$store.commit('user/setUserInfo',yonghu)
     this.$router.push('/home')
    this.$toast('登录成功')
    }).catch((err)=>{
      console.log(err);
    })


      // 进行判断，看地址栏有无回跳地址
      // 1. 如果有   => 说明是其他页面，拦截到登录来的，需要回跳
      // 2. 如果没有 => 正常去首页
      // const url = this.$route.query.backUrl || '/'
      // this.$router.replace(url)
  }
  }
}
</script>

<style lang="less" scoped>

.home-header{
   width: 100%;
   height: 30px;
   background-color: rgb(10, 135, 245);
   h3{
       text-align: center;
       color: aliceblue;
       padding-top: 5px;
   }
   
}
h2{
display: inline-block;
margin-left: 30px;
margin-top: 20px;
}
.middle{
 p{
   margin-left: 30px;
   margin-top: 10px;
   font-size: 15px;
   color: #b4aeae;
 }
 img{
   margin-left: 125px;
   margin-top: 50px;
   width: 120px;
   height: 120px;
   border-radius: 50px;
 }
 label{
 font-size: 15px;
 margin-left: 65px;
  input{
    margin-top: 40px;
    border: 0;
    border-bottom: 1px solid #b4aeae;
  }
 }
}
.van-button--primary {
  margin-left: 60px;
 width: 90px;
 height: 40px;
 margin-top: 50px;
}
.bottom{
  input{
    width: 10px;
    height: 10px;
    margin-left: 80px;
    margin-top: 30px;
  }
  .sure{
    border-radius: 10px;
  }
  .xieyi{
    color: #b4aeae;
    margin-top: -15px;
    margin-left: 100px;
  }
}
.van-cell{
 margin-top: 20px;
}

</style>